<template>
  <div class="main-container">
    <!--  顶部导航条  -->
    <top-bar-son :title="title"></top-bar-son>
    <!--    占位空间 45px-->
    <div class="space"></div>
    <!--  筛选器  -->
    <seive-adapter></seive-adapter>
    <!--  地图组件  -->
    <div class="map-container">
      <baidu-map class="map" :center="{lng: 123.239568, lat: 41.501159}" :zoom="13" :scroll-wheel-zoom="true"
                 mapType="BMAP_SATELLITE_MAP">
        <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
        <bm-marker
            :position="{lng: 123.208694, lat: 41.511133}"
            :dragging="false" animation="BMAP_ANIMATION_BOUNCE">
          <bm-label content="S" :labelStyle="{color: 'red', fontSize : '11px'}"
                    :offset="{width: 0, height: 27}"/>
        </bm-marker>
        <bm-marker
            :position="{lng: 123.213810, lat: 41.532536}"
            :dragging="false" animation="BMAP_ANIMATION_BOUNCE">
          <bm-label content="R" :labelStyle="{color: 'red', fontSize : '11px'}"
                    :offset="{width: -2, height: 27}"/>
        </bm-marker>
        <bm-marker
            :position="{lng: 123.239568, lat: 41.501159}"
            :dragging="false" animation="BMAP_ANIMATION_BOUNCE">
          <bm-label content="T" :labelStyle="{color: 'red', fontSize : '11px'}"
                    :offset="{width: 3, height: 27}"/>
        </bm-marker>
        <bm-marker
            :position="{lng: 123.225734, lat: 41.491298}"
            :dragging="false" animation="BMAP_ANIMATION_BOUNCE">
          <bm-label content="U" :labelStyle="{color: 'red', fontSize : '11px'}"
                    :offset="{width: -2, height: 27}"/>
        </bm-marker>
        <bm-marker
            :position="{lng: 123.258073, lat: 41.525818}"
            :dragging="false" animation="BMAP_ANIMATION_BOUNCE">
          <bm-label content="W" :labelStyle="{color: 'red', fontSize : '11px'}"
                    :offset="{width: -2, height: 27}"/>
        </bm-marker>
        <bm-marker
            :position="{lng: 123.206654113, lat: 41.4751484406}"
            :dragging="false" animation="BMAP_ANIMATION_BOUNCE">
          <bm-label content="V" :labelStyle="{color: 'red', fontSize : '11px'}"
                    :offset="{width: -2, height: 27}"/>
        </bm-marker>
        <bm-marker
            :position="{lng: 123.255968535, lat: 41.5130317248}"
            :dragging="false" animation="BMAP_ANIMATION_BOUNCE">
          <bm-label content="X" :labelStyle="{color: 'red', fontSize : '11px'}"
                    :offset="{width: -2, height: 27}"/>
        </bm-marker>
        <bm-marker
            :position="{lng: 123.245306526, lat: 41.5120780445}"
            :dragging="false" animation="BMAP_ANIMATION_BOUNCE">
          <bm-label content="Y" :labelStyle="{color: 'red', fontSize : '11px'}"
                    :offset="{width: -2, height: 27}"/>
        </bm-marker>
        <bm-marker
            :position="{lng: 123.237806398, lat: 41.4998245308}"
            :dragging="false" animation="BMAP_ANIMATION_BOUNCE">
          <bm-label content="Z" :labelStyle="{color: 'red', fontSize : '11px'}"
                    :offset="{width: -2, height: 27}"/>
        </bm-marker>
      </baidu-map>
    </div>
    <!--  参数文字盒子  -->
    <div class="station-text-parameter">

    </div>
    <!--  图表可视化分析盒子  -->
    <div class="station-chart-analysis">

    </div>
  </div>
</template>

<script>
import TopBarSon from "@/components/TopBarSon";
import SeiveAdapter from "@/components/SeiveAdapter";

export default {
  name: "Stations",
  components: {TopBarSon, SeiveAdapter},
  data() {
    return {
      title: '台站工况'
    }
  },
  methods: {},
  mounted() {

  }
}
</script>

<style scoped>
.main-container{
  background-color: rgb(252, 249, 249);
}
.space {
  height: 45px;
}
.map {
  width: 100%;
  height: 380px;
}
.station-text-parameter{
  width: 300px;
  height: 100px;
  border: 1px solid black;
  border-radius: 5px;
  margin: 10px auto;
  background-color: #fff;
}
.station-chart-analysis{
  width: 300px;
  height: 150px;
  border-radius: 5px;
  border: 1px solid black;
  margin: 10px auto;
  background-color: #fff;
}

</style>